<template>
    <div class="tab" id="tab">
        <div class="scroll-tab">
            <div :class="['tab-item',index===activeIndex ? 'tab-item-active' : '']" v-for="(item,index) in items" v-bind:key="index" @click="handleClick" :data-index="index">
                {{item.categoryName}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CatTab",
        model:{
            prop: "active",
            event:"change"
        },
        props:{
            items : {
                type : Array,
            },
            active : {
                type : Number,
                default : 0
            },
        },
        data(){
            return {
                arrLenght:0,
                activeIndex : this.active,
            }
        },
        computed:{
            treasureCategory:()=>{
                this.arrLenght = this.category.length;
                return this.category;
            },
        },
        mounted() {
            this.$on("change",()=>{
                return ;
            });
        },
        create(){

        },
        methods:{
            handleScroll(){
                // console.log(index);
                // this.activeIndex = index;
                //console.log(e)
                // console.log(e.target.offsetLeft);
                // e.target.offsetLeft=500;
                // let touch = e.targetTouches[0];
                // let mX = touch.pageX;
                // let mY = touch.pageY;
                // let $scrollTab=document.getElementById("scroll_tab");
                // let moveto = 0;
                // let touchstartX, touchstartY;
                // let scrollMax;
                // if (touchstartY - mY <= 15 && touchstartY - mY >= -15) {
                //     let transform = $scrollTab.style.transform;
                //     transform = transform.replace("translate(", "");
                //     var currentX = Number(transform.substring(0, (transform.indexOf(",") - 2)));
                //     moveto = -(touchstartX - mX)/4.8;
                //     moveto = moveto + currentX;
                //     if (moveto <= (100) && moveto >= (-scrollMax - 100)) {
                //         $scrollTab.style.transform="translate(" + moveto + "px, 0px) translateZ(0px)";
                //     }
                // }
            },
            handleClick(e){
                let el = e.target;
                this.activeIndex = parseInt(el.dataset.index);
                this.$emit( 'change',this.activeIndex);
                // this.activeKey = parseInt(el.dataset.index);
                // console.log(this.activeKey);
                // this.active = parseInt(el.dataset.index);
                // let winWidth = window.screen.availWidth;
                // if(e.path[0].offsetLeft>winWidth/2){
                //     e.path[1].scrollLeft=e.path[1].scrollLeft+e.clientX/4
                // }
                // console.log(e);
                // // e.path[1].style.transform="translate(" + -(e.pageX/2) + "px, 0px) translateZ(0px)"
                // // console.log(e.target.path[1].scrollLeft=500);
                // // e.path[1].scrollLeft=500
                // // e.targetx=500;
                // e.path[1].scrollLeft=e.path[1].scrollLeft+e.clientX/4
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "treasure";
    .tab{
        overflow: hidden;
        margin: 0 auto;
    }
    .scroll-tab{
        margin:0 15px;
        transition: All 0.8s ease-in-out;
        display: flex;
        overflow: hidden;
        overflow-x:auto;
        .tab-item{
            text-align: center;
            transition: All 0.4s ease-in-out;
            display: inline-block;
            padding: 2px 8px;
            text-decoration: none;
            flex: none;
            background: transparent;
            border-radius: 50rem;
            color:$gray-600;
        }
        .tab-item-active{
            background: #ff5f00;
            border-radius: 50rem;
            color:white;
        }
    }
</style>
